import React, { useState, useEffect, useMemo } from 'react';
import { Button, Table } from 'antd';
import './shopcar.scss'
import { connect } from 'react-redux'
import { addnum ,jiannum,delitem ,delAll} from "../redux/shop/action";


function Shoped(props) {
  // eslint-disable-next-line
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  // eslint-disable-next-line
  const [list, setlist] = useState(props.list)

  // eslint-disable-next-line
  // const [zj, setzj] = useState(0)

  const gettotal = useMemo(() => {
    let zj = 0
    let newlist = JSON.parse(JSON.stringify(props.list))
    let new_arr = newlist.filter((x) => selectedRowKeys.some((item) => x.id === item));
    new_arr.forEach((item) => {
      zj += item.num * item.price
    },[])
    return zj
  })

  // const getlist = () => {
  //   // // 进行本地存储，转成字符串
  //   let arr = JSON.parse(window.localStorage.getItem("goodscar"))
  //   // console.log(arr);
  //   // // 更新数据，页面不刷新，拷贝一下数据
  //   setlist(arr)
  // }


  // // eslint-disable-next-line
  // useEffect(() => {
  //   // gettotal()

  // }, [selectedRowKeys,props.list])
  // // eslint-disable-next-line
  // useEffect(() => {
  //   getlist()

  // }, [])
  //-----------------------------------------------------------------------------------------------//

  function add(index){
    props.add(index)
  }
  function jian(index) {
    props.jian(index)
    
  }
  function delList(index) {
    props.del(index)
  }
  function delAll() {
    props.delall(selectedRowKeys)

    setSelectedRowKeys([])
  }

  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };




  const columns = [

    {
      title: '序号',
      key: 'index',
      render: (text, record, index) => {
        return index + 1
      }
    },
    {
      title: '图片',
      dataIndex: 'img',
      key: 'img',
      render: (text, record, index) => {
        // console.log(text, record, index)
        return (<img width="50" height="50" src={record.img} alt="" />)
      }
    },
    {
      title: '商品名',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      sorter: (a, b) => a.price - b.price,

    },
    {
      title: '数量',
      dataIndex: 'num',
      key: 'num',
      render: (text, record, index) => {
        return <div>
          <Button onClick={() => { jian(record.id) }} size='small'>-</Button>
          <span style={{ margin: '0 5px' }}>{record.num}</span>
          <Button onClick={() => { add(record.id) }} size='small'>+</Button>
        </div>
      }

    },
    {
      title:'小计',
      dataIndex :'xj',
      key :'xj',
      render:(text, record, index) => {
        return <div>
          {record.num*record.price}
        </div>
      }
    },
    {
      title: '操作',
      render: (text, record, index) => {
        // console.log(text,record,index)
        return <div>
          <Button onClick={() => { delList(record.id) }} type="primary" size="middle">删除</Button>
        </div>
      }

    }
  ];



  // console.log(props,'147');
  return (

    <div>
      <div >

        <Table
          dataSource={props.list}
          columns={columns}
          rowKey={columns => columns.id}
          rowSelection={rowSelection}
          pagination={{
            pageSize: 2,
          }
          }
          scroll={{
            y: 500,
          }}
        />;

      </div>
      <div className='footer'>
        <div>总价：￥{gettotal}</div>
        <div>选中商品数量：{selectedRowKeys.length}</div>
        <div><Button type="primary" onClick={delAll}>选中删除</Button></div>
        <div><Button type="primary">结算</Button></div>
      </div>
    </div>
  )
}
// 定义一个函数成为我们的connect第一个参数，用途为接受redux中的数据,作用将redux中的数据转换成props
const mapStateToProps = (state) => {
  console.log(state.goods);
  return {
    list: state.goods,

  }
}
// 将redux中的派发动作转换到props中
const mapDispatchToProps = function (dispatch) {
  return {
    add: (i) => {
      dispatch(addnum(i) )
    },
    jian: (i) => {
      dispatch(jiannum(i) )
    },
    del: (i) => {
      dispatch(delitem(i) )
    },
    delall: (i) => {
      dispatch(delAll(i) )
    },
      

  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Shoped)
